<template>
  <div id="databaseDetails">
    <div class="list-file" v-show="listVisible">
      <el-table class="table"
                ref="filetable"
                size="small"
                :data="tableData"
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                @selection-change="selsChange"
                style='font-family:"宋体"'>
        <el-table-column prop="fileName" label="文件名" width="300px">
          <template slot-scope="scope">
            <div class="folder-box"
                 v-if="scope.row.fileType == 1"
                 :class="scope.row.fileType == 1 ? 'is-file' :''"
                 @click="handleCellClick(scope.row)">
              <span class="file-icon" :class="scope.row.fileIcon"></span>
              <el-tooltip
                class="item"
                effect="dark"
                v-if="scope.row.fileName && $abslength(scope.row.fileName) > 20"
                :content="scope.row.fileName"
                placement="top-start"
              >
                <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,20))+'...'}}</span>
              </el-tooltip>
              <span v-else class="file-name">{{scope.row.fileName}}</span>
            </div>
            <div v-else class="folder-box" @click="handleCellClick(scope.row,undefined,undefined,'file')">
              <span class="file-icon" :class="scope.row.fileIcon"></span>
              <el-tooltip
                class="item"
                effect="dark"
                v-if="scope.row.fileName && $abslength(scope.row.fileName) > 20"
                :content="scope.row.fileName"
                placement="top-start"
              >
                <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,20))+'...'}}</span>
              </el-tooltip>
              <span v-else class="file-name">{{scope.row.fileName}}</span>
              <!--<span class="download-btn" @click.stop @click="downloadFile(scope.row)"><i class="fa fa-download" aria-hidden="true"></i></span>-->
                <div class="folder-box-options" v-if="scope.row.fileType == 0">
                                          <span style="cursor: pointer; padding-right: 10px" @click.stop @click="downloadFile(scope.row)">
                <i class="fa fa fa-cloud-download" aria-hidden="true"></i>下载
              </span>
                    <span style="cursor: pointer; padding-right: 10px" @click.stop @click="previewFile(scope.row)">
                <i class="fa fa-file" aria-hidden="true"></i>
                预览
              </span>
                </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creatTime" label="创建日期"></el-table-column>
        <el-table-column prop="updateTime" label="操作日期"></el-table-column>
        <el-table-column prop="size" label="大小" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.fileType == 1">-</span>
            <span v-else>{{scope.row.size}}</span>
          </template>
        </el-table-column>
        <el-table-column width="40">
          <template slot-scope="scope" v-if="scope.row.isFavorites!=undefined">
              <el-button
                      class="butt"
                      size="mini"
                      v-show="scope.row.isFavorites==0"
                      @click="collectFile(scope.row)"
                      type="text"
              >
                  <i class="fa fa-star-o" aria-hidden="true"></i>
              </el-button>
              <el-button
                      class="butt"
                      size="mini"
                      v-show="scope.row.isFavorites==1"
                      @click="collectFile(scope.row)"
                      style="margin-left:0"
                      type="text"
              >
                  <i class="fa fa-star" aria-hidden="true"></i>
              </el-button>
              <el-button
                      class="butt"
                      size="mini"
                      v-show="scope.row.isFavorites==undefined"
                      :disabled="true"
                      style="margin-left:0"
                      type="text"
              >
                  <i class="fa fa-star-o" aria-hidden="true"></i>
              </el-button>
          </template>
        </el-table-column>
        <el-table-column>
        <template slot-scope="scope">
          <div v-if="$store.state.zlkLoadingList.length>0&&$store.state.zlkLoadingList[0].id==scope.row.id">
            <span>正在下载中：</span><span style="color:red" @click="stopDownload"><i class='el-icon-circle-close'></i></span>
            <el-progress :percentage='$store.state.zlkLoadingList[0].percentComplete' :show-text="true"></el-progress>
          </div>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <div class="tiling-page" v-show="!listVisible">
      <ul class="tiling-list">
        <li class="tiling-item" v-for="(item,index) in tableData" :key="index"
                :class="item.isChecked== true ? 'active':''">
          <span class="tiling-icon file-icon" :class="item.fileIcon"></span>
          <el-tooltip
            class="item"
            effect="dark"
            v-if="item.fileName && $abslength(item.fileName) > 20"
            :content="item.fileName"
            placement="top-start"
          >
            <span class="tiling-name" :class="item.fileType == 1 ? 'is-file' :'not-file'"
                  @click="handleCellClick(item)">{{ item.fileName.substring(0,$getFontShowLength(item.fileName,20))+'...'}}</span>
          </el-tooltip>
          <span v-else class="tiling-name" :class="item.fileType == 1 ? 'is-file' :'not-file'"
                @click="handleCellClick(item)">{{item.fileName}}</span>
          <div class="tiling-more">
            <!--<span class="tiling-check" @click="clickFile(item)" :class="item.isChecked== true ? 'active':''"></span>-->
              <el-popover placement="right" class="setting tiling-oper" trigger="hover" v-if="item.isFavorites!=undefined">
                  <ul class="settingOptions">
                      <li @click="downloadFile(item)" v-show="item.fileType=='0'">
                          <i class="fa fa-download" aria-hidden="true"></i>
                          下载
                      </li>
                      <li @click="previewFile(item)" v-show="item.fileType=='0'">
                          <i class="fa fa-file" aria-hidden="true"></i>
                          预览
                      </li>
                      <li @click="collectFile(item)" v-if="item.isFavorites == 0">
                          <i class="fa fa-star-o" aria-hidden="true"></i>
                          收藏
                      </li>
                      <li @click="collectFile(item)" v-if="item.isFavorites == 1">
                          <i class="fa fa-star" aria-hidden="true"></i>
                          取消收藏
                      </li>
                  </ul>
                  <i slot="reference" class="iconfont" style="cursor: pointer;" @click.stop>&#xe679;</i>
              </el-popover>
          </div>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination
        v-show="isRootFile"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div class="mask"
         v-loading="downloading"
         v-if="downloading"
         element-loading-text="等待文件下载中..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0)">
    </div>
    <div class="download-box" v-if="$store.state.dataBaseDownBox==1&&!listVisible">
          <span class="smaller-icon" @click="$store.commit('setDataBaseDownBox',2)"><i class="fa fa-compress" aria-hidden="true"></i></span>
        <span>正在下载中：</span><span style="color:red" @click="stopDownload"><i class='el-icon-circle-close'></i></span><br>
        <el-progress :percentage='$store.state.zlkLoadingList[0].percentComplete' :show-text="true"></el-progress>
    </div>
    <div class="download-box-small" v-if="$store.state.dataBaseDownBox==2&&!listVisible">
      下载中：<span @click="$store.commit('setDataBaseDownBox',1)"><i class="fa fa-expand" aria-hidden="true"></i></span>
    </div>
  </div>
</template>
<script>
  import { mapMutations} from "vuex";
  var xhr = new XMLHttpRequest();
  export default {
    props: ['databaseData', 'currentPage', 'pageSize', 'records', 'listVisible'],
    data() {
      return {
        listLoading: false,
        searchVal: '',
        tableData: [],
        total: 0,
        sels: [],
        imgurl: '',
        isRootFile: true,
        downloading: false,
        filePath:[],
        percentComplete:0,
      };
    },
    created() {
    },
    components: {},
    mounted() {
      this.initData();
    },
    watch: {
      // checkFileItem:function (newVal,oldVal) {
      //   if (newVal != oldVal){
      //     this.SelectPath();
      //   }
      // }
    },
    computed: {},
    methods: {
      ...mapMutations(["setSearchInput"]),
      // 返回到指定路径
      SelectPath(){
        console.log(this.checkFileItem);
        if (this.checkFileItem != ''){
          this.tableData = []
          if (this.checkFileItem.fileType == 1) { // 文件夹
            this.isRootFile = false
            this.$http.post("/file/clickdir", {id: this.checkFileItem.id}).then(res => {
              console.log('二级资料', res);
              if(res.data == null){
                console.log("null data")
                this.$emit('fileTotal', 0);
                return
              }
              if (res.status == 200 && res.data != null) {
                  this.tableData = res.data
                  this.total = res.data.length
                  this.$emit('fileTotal', this.total)
                  this.filePath.push(this.checkFileItem);
                  this.$emit('checkFilePath',this.filePath)
              }
            })
          } else {
            console.log('这是文件')
          }
        }
      },
      // 数据初始化
      initData() {
        this.total = this.records;
        this.databaseData.forEach(v => {
          let suffixTemp = v.fileName.split('.');
          let file_icon;
          if (suffixTemp.length > 1) {
            suffixTemp = suffixTemp[suffixTemp.length - 1];
            file_icon = 'icon_list_' + suffixTemp
          } else if (v.fileType == 0) {
            suffixTemp = ''
          } else {
            suffixTemp = null
          }
          let str = "";
          if (v.dirName) {
            v.dirName.forEach(val => {
              str = str + val.name + '/'
            })
          }
          this.tableData.push({
            id: v.id,
            dirId: v.dirId,
            fileName: v.fileName,
            peopleName: "暂无该字段",
            size: v.fileSize == null ? "-" : this.$getFileSize(v.fileSize),
            creatTime: v.creatTime == null ? "暂无数据" : v.creatTime,
            updateTime: v.updateTime == null ? v.creatTime : v.updateTime,
            suffix: suffixTemp,
            fileIcon: v.fileType == 1 ? 'icon_list_folder' : file_icon,
            fileHash: v.fileHash,
            fileType: v.fileType,
            isFavorites: v.isFavorites,
            dirName: str,
            pathArray: v.dirName,
            fileSize:v.fileSize,
          })
        })
        console.log(this.tableData);
      },
      // 分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.$emit("handleSizeChange",val)
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.$emit("handleCurrentChange",val)
        console.log(`当前页: ${val}`);
      },
      selsChange: function (sels) {
        console.log(sels)
        this.sels = sels;
      },
      // 点击事件 进入下级文件
      handleCellClick(row,a,preview,file) {
        this.setSearchInput("");
        this.$store.state.placeHolder = "搜索资料库下的文件/文件夹"
        if(a == undefined && file == undefined){

          if(preview && preview.pathArray.length>0){
            console.log(preview.pathArray)
            preview.pathArray.forEach(val=>{
              this.filePath.push({
                fileName:val.name,
                fileType:1,
                id:val.id.split(".")[0]
              })
            })
          }else{
            this.filePath.push(row);
          }
           this.$emit('checkFilePath',this.filePath)
        }
        if (row.fileType == 1 || preview !== undefined) { // 文件夹\
          this.tableData = []
          if(file == 'file'){
            this.previewFile(row);
            return;
          }
          if(preview !== undefined){
            this.previewFile(preview);
          }
          this.isRootFile = false
          console.log(row);
          console.log(row.id,row.dirId)
          this.$http.post("/file/clickdir", {id: row.id}).then(res => {
            console.log('二级资料', res);
            if(res.data == null){
              console.log("null data")
              this.$emit('fileTotal', 0);
              return
            }
            if (res.status == 200 && res.data != null) {
              res.data.forEach(v => {
                if(v.fileName != null){
                  let suffixTemp = v.fileName.split('.');
                  let file_icon;
                  if (suffixTemp.length > 1) {
                    suffixTemp = suffixTemp[suffixTemp.length - 1];
                    file_icon = 'icon_list_' + suffixTemp
                  } else if (v.fileType == 0) {
                    suffixTemp = ''
                  } else {
                    suffixTemp = null
                  }
                  let str = "";
                  if (v.dirName) {
                    v.dirName.forEach(val => {
                      str = str + val.name + '/'
                    })
                  }
                  this.tableData.push({
                    id: v.id,
                    dirId: v.dirId,
                    fileName: v.fileName,
                    peopleName: "暂无该字段",
                    size: v.fileSize == null ? "-" : this.$getFileSize(v.fileSize),
                    creatTime: v.creatTime == null ? "暂无数据" : v.creatTime,
                    updateTime: v.updateTime == null ? v.creatTime : v.updateTime,
                    suffix: suffixTemp,
                    fileIcon: v.fileType == 1 ? 'icon_list_folder' : file_icon,
                    fileHash: v.fileHash,
                    fileType: v.fileType,
                    isFavorites: v.isFavorites,
                    dirName: str,
                    pathArray: v.dirName,
                    fileSize:v.fileSize,
                  })
                }
              })
              this.total = res.data.length
              this.$emit('fileTotal', this.total)
            }
          })
        } else {
          this.previewFile(row);
        }
      },
      getType(file) {
        // console.log(file);
        var filename = file;
        var index1 = filename.lastIndexOf(".");
        var index2 = filename.length;
        var type = filename.substring(index1 + 1, index2);
        // console.log(type);
        return type;
      },
      handleImageFile (url) {
        // 使用FileReader来处理
        console.log(url);
        const reader = new FileReader ();
        let _this=this;
        reader.addEventListener ('load', (e) => {
          console.log(e);
          const imgUrl = e.target.result;
          let imgNode = document.createElement('img');
          imgNode.src = imgUrl;
          console.log(imgNode);
          //imgNode.setAttribute('height', '100%');
          imgNode.setAttribute('width', '800px');
          imgNode.style.position='absolute';
          imgNode.style.top='50%';
          imgNode.style.left='50%';
          imgNode.style.transform='translate(-50%, -50%)';
          // imgNode.setAttribute('transform', 'translate(-50%, -50%)');
          _this.createPreviewItem(imgNode);
        });
        reader.readAsDataURL(url);
      },
      handlePdfFile (url) {
        // 使用URL来处理
        const pdfUrl = url;
        let embedNode = document.createElement('embed');
        embedNode.src = pdfUrl;
        embedNode.setAttribute('width', '100%');
        embedNode.setAttribute('height','100%')
        // embedNode.setAttribute('margin-top', '100px');
        embedNode.style.position='absolute';
        embedNode.style.left='0px';
        embedNode.style.top='0px';
        embedNode.style.bottom='0px';
        embedNode.style.right='0px';
        console.log(embedNode);
        this.createPreviewItem(embedNode);
      },
      createPreviewItem (newNode) {
        console.log(newNode);
        let body=document.querySelector("body");
        let box=document.querySelector(".preview-box");
        let iSpan=document.querySelector('.preview-box>span');
        let myul=document.querySelector(".preview-box__ul");
        myul.appendChild(newNode);
        iSpan.addEventListener("click", function(){
          box.style.display = "none";
          myul.removeChild(newNode);
        })
        box.style.display='block';
      },
      // 预览文件
      previewFile(file){
        console.log(file);
        let arr = ["txt"];
        if (arr.indexOf(this.getType(file.fileName)) != -1) {
          if(this.$store.state.ipfsArray==0){
            this.$message.error('获取请求路径失败,请检查网络或呼叫管理员');
          }else{
            this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
              this.imgurl = window.URL.createObjectURL(blob);
              console.log(this.imgurl)
              if(this.imgurl != ""){
                window.open(this.imgurl,"_blank")
              }
            });
          }
        } else if(file.suffix.toLowerCase() == "mp4" || file.suffix.toLowerCase() == "webm" || file.suffix.toLowerCase() == "ogg" ){
          let url = this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
          console.log(url);
          var page = window.open();
          var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style='width:980px;height: 480px'>
                            <video  style='width:980px;height: 480px' controls width='100%' autoplay id="playVideo">
                                <source class="source" src=${url} type="video/mp4">
                            </video>
                        </div>
                    </body>`
          page.document.write("<title>视频预览</title>"+html);
        }else if(file.suffix.toLowerCase() == "flv"){
          let url = this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
          console.log(url);
          let data = url;
          let data1 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&BufferTime=3&IsAutoPlay=1";
          let data2 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&IsAutoPlay=1";
          var page = window.open();
          var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;background: black">
                            <object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=${data} width="980" height="480" style="border: 1px solid #549de8">
                                <param name="movie" value="/static/flvplayer.swf">
                                <param name="quality" value="high">
                                <param name="allowFullScreen" value="true">
                                <param name="FlashVars" value=${data1}>
                                <embed src="/static/flvplayer.swf" allowfullscreen="true" flashvars=${data2} quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="480"></embed>
                            </object>
                        </div>
                    </body>`
          page.document.write("<title>视频预览</title>"+html);
          // let routeUrl = this.$router.resolve({
          //   path: "/videoPlay",
          //   query: {url:url}
          // });
          // window.open(routeUrl.href, '_blank');
        }else if(file.suffix.toLowerCase() == "pdf"){
          this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
            this.imgurl = window.URL.createObjectURL(blob);
            this.handlePdfFile(this.imgurl)
          });
        }else if(file.suffix.toLowerCase() == "png"||file.suffix.toLowerCase() == "jpg"||file.suffix.toLowerCase() == "gif"){
          this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
            // this.imgurl = window.URL.createObjectURL(blob);
            this.handleImageFile(blob);
          });
        }else{
          this.$message("当前文件不支持预览，请下载查看");
        }
      },
      // 选中文件
      clickFile(item) {
        // console.log(item)
        if (!item.isChecked) {
          this.$set(item, 'isChecked', true);
        } else {
          this.$set(item, 'isChecked', !item.isChecked);
        }
      },
      //收藏、取消收藏
      collectFile(row) {
        let message;
        if (row.isFavorites == 0) {
          message = "是否确认收藏文件" + row.fileName;
        } else {
          message = "是否取消收藏" + row.fileName;
        }
        this.$confirm(message, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$http.get("/favorites/clickCollection", {
            params: {
              id: row.id
            }
          }).then(res => {
            if (res.status == 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              if (row.isFavorites == 0) {
                row.isFavorites = 1;
              } else {
                row.isFavorites = 0;
              }
            } else {
              this.$message.error("操作失败");
            }
          });
        })
      },
    downloadFile(file) {
      let methodType=file.fileSize>1000000000 ? 0 : 1;
      if(this.$store.state.ipfsArray[1]==0){
        this.$message.error('获取请求路径失败,请检查网络或呼叫管理员');
      }else{
        if(methodType){
          if(this.$store.state.zlkLoadingList.length>0){
          this.$message.warning('请等待当前文件下载完成后，再执行下载操作。');
          return;
        }
        console.log(methodType);
        this.$store.commit('setDataBaseDownBox',1);
      let obj={
        id:file.id,
        percentComplete:0
      }
      this.$store.commit('setZlkLoadingList',[obj]);
           this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
             this.$store.commit('setZlkLoadingList',[]);
             this.$store.commit('setDataBaseDownBox',0);
             console.log(this.percentComplete)
          this.saveAs(blob, file.fileName,true);
        });
        }else{
          this.$message({
            type:'warning',
            message:'大文件需专用通道匿名加速下载，下载后请手动重命名',
            duration:'5000'
          })
          let url=this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
          this.saveAs(url,file.fileName);
        }
      }
    },
    getType(filename) {
        var index1 = filename.lastIndexOf(".");
        var index2 = filename.length;
        var type = filename.substring(index1 + 1, index2);
        return type;
      },
      stopDownload(){
      xhr.abort();
      this.$message.info('取消下载');
      this.$store.commit('setZlkLoadingList',[]);
      this.$store.commit('setDataBaseDownBox',0);
    },
    getBlob(url) {
      let _this=this
      return new Promise(resolve => {
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        console.log(_this.$store.state.zlkLoadingList[0]);
        let obj=_this.$store.state.zlkLoadingList[0];
        xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        obj.percentComplete =  Math.round((evt.loaded / evt.total ).toFixed(2) * 100);
        _this.$store.commit('setZlkLoadingList',[obj]);
      }
    }, false);
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },
    saveAs(url,filename,isArr) {
      if (window.navigator.msSaveOrOpenBlob && isArr===true) {
        navigator.msSaveBlob(url, filename);
      } else {
        const link = document.createElement("a");
        const body = document.querySelector("body");
        if(isArr===true){
         link.href=window.URL.createObjectURL(url);
        }else{
          link.href = url;
        };
        link.download = filename;
        link.type="application/octet-stream"
        console.log(link.download)
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    }
  };
</script>
<style scoped lang="scss">
  @import "scss_vars";

  #databaseDetails {
    .download-box{
        position: fixed;
        z-index: 10;
        bottom: 20px;
        right: 20px;
        width: 330px;
        padding: 14px 26px 14px 13px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    .smaller-icon{
      position: absolute;
      right:5px;
      top:10px;
    }
      }
      .download-box-small{
      position: fixed;
      z-index: 20;
      bottom: 20px;
        right: 20px;
        border: 1px solid #ebeef5;
    background-color: #549DE8;
    width: 70px;
    border-radius: 4px;
    padding: 5px 8px 5px 5px;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.8);
    }

    .maskmsg {
      margin-top: 300px;
      color: #01b1a2;
      font-size: 36px;
      text-align: center;
    }

    .el-table {
      font-family: '宋体', '黑体';
    }

    .download-btn:hover{
      cursor: pointer;
    }

    .pagination {
      width: 100%;
      margin: 20px 0;
    }

    .folder-box {
      display: flex;
      align-items: center;
        .folder-box-options{
            display: none;
        }

      .download-btn{
        width: 30px;
        color: #549DE8;
      }

      .file-name{
        flex: 1;
      }
      .file-name:hover{
        cursor: pointer;
        text-decoration: underline;
      }
      .file-icon {
        background: url("/static/bigicon.png") no-repeat -196px 0px;
        display: inline-block;
        width: 28px;
        height: 29px;
        margin-right: 10px;
      }

      &.is-file {
        cursor: pointer;
      }
    }
      .folder-box:hover  .folder-box-options{
          display: block;
      }

    .el-button {
      font-size: 7px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }

    .tiling-page {
      .tiling-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-top:20px;
          /*margin-left: 20px;*/
        .tiling-item {
          box-sizing: border-box;
          border: 1px solid #F6F6F6;
          margin-bottom: 20px;
          margin-left: 20px;
          width: 256px;
          height: 54px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          cursor: pointer;
          .tiling-icon {
            margin-left: 21px;
            width: 30px;

            &.file-icon {
              background: url("/static/bigicon.png") no-repeat -196px 0px;
              display: inline-block;
              width: 28px;
              height: 29px;
              margin-right: 10px;
            }

          }

          .tiling-name {
            flex: 1;

            &.is-file {
              cursor: pointer;
            }

            &.not-file {
              pointer-events: none;
            }
          }

          .tiling-more {
            width: 30px;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
            visibility: hidden;

            .tiling-oper {
              background: #ffffff;
              height: 28px;
              width: 18px;
              position: absolute;
              right: 2px;
              bottom: 2px;
              text-align: center;

            }

            .tiling-check {
              width: 18px;
              height: 20px;
              background: url('../../assets/img/check.png') no-repeat 0 0;
              background-size: 18px 18px;
              position: absolute;
              right: 0;
              top: 0;

              &.active {
                background: url('../../assets/img/check_in.png') no-repeat 0 0;
                background-size: 18px 18px;
              }
            }

          }

          &:hover {
            border: 1px solid #549DE8;

            .tiling-more {
              visibility: visible;
            }
          }

          &.active {
            border: 1px solid #549DE8;

            .tiling-more {
              visibility: visible;
            }
          }
        }
      }
    }


  }
</style>
<style lang="scss">
  .el-button--text {
    color: #999999;
  }

  .more-list {
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;

    .more-item {
      cursor: pointer;
      color: #666666;
      padding: 3px 0;
      width: 100%;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 1);
      border-bottom: 1px solid rgba(255, 255, 255, 1);

      &:hover {
        background: rgba(246, 246, 246, 1);
        border-top: 1px solid rgba(221, 221, 221, 1);
        border-bottom: 1px solid rgba(221, 221, 221, 1);
      }
    }

  }

  .el-popover {
    border: 1px solid rgba(221, 221, 221, 1);
    border-radius: 2px;
  }

</style>
